<!--
 * @Author: ChaiHongJun
 * @Date: 2021-04-08 14:13:34
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-05-03 09:06:54
 * @version: 
 * @Description:MV播放页
-->
<template>
  <div class="mv-detail container">
    <div class="left shadow">
      <div class="video-container">
        <video :src="getMvSrc" controls controlslist="nodownload"></video>
      </div>
      <div class="video-foot">
        <h2 class="title flex-row">
          <i class="iconfont nicemv24"></i> {{ getMvDetail.name }}
        </h2>
        <div class="tag">
          <a v-for="(tag, index) of getMvDetail.videoGroup" :key="index">
            #{{ tag.name }}
          </a>
        </div>
        <p class="flex-row">
          <span>发布：{{ getMvDetail.publishTime }}</span>
          <span>播放次数：{{ getMvDetail.playCount }}</span>
        </p>
        <div class="follow">
          <div class="box">
            <i class="iconfont nicexihuan3 icon-like"></i> {{ getMvLikedCount }}
          </div>
          <div class="box">
            <i class="iconfont niceshoucang2 icon-collection"></i> 1
          </div>
          <div class="box">
            <i class="iconfont nicefenxiang2 icon-share"></i>
            {{ getMvShareCount }}
          </div>
        </div>
      </div>
      <div class="comments">
        <div class="title flex-row">
          <i class="iconfont nicepinglun"></i>Comments |
          <span class="noticom"
            ><a>{{ getMvCommentsCount }} 条评论</a></span
          >
        </div>
        <div class="comment-list">
          <h3>精彩评论</h3>
          <ul v-loading="loadingComment" v-if="getMvHotComments.length > 0">
            <li
              class="item"
              v-for="(comment, index) of getMvHotComments"
              :key="index"
            >
              <div class="avatar">
                <img
                  :src="comment.user.avatarUrl + '?param=150y150'"
                  :alt="comment.user.nickname"
                  :title="comment.user.nickname"
                />
              </div>
              <div class="info">
                <h2 class="flex-between">
                  <span>
                    {{ comment.user.nickname }}- <small> · 61月前</small></span
                  >
                  <div class="tool flex-row">
                    <i class="iconfont nicezan1 icon-zan"></i
                    ><span>({{ comment.likedCount }})</span
                    ><i class="iconfont nicevoice icon-comment"></i>
                  </div>
                </h2>
                <div class="content">
                  {{ comment.content }}
                </div>
              </div>
            </li>
          </ul>
          <p v-else>暂无评论</p>
        </div>
        <div class="comment-list">
          <h3>最新评论</h3>
          <ul v-loading="loadingComment" v-if="getMvComments.length > 0">
            <li
              class="item"
              v-for="(comment, index) of getMvComments"
              :key="index"
            >
              <div class="avatar">
                <img
                  :src="comment.user.avatarUrl + '?param=150y150'"
                  :alt="comment.user.nickname"
                  :title="comment.user.nickname"
                />
              </div>
              <div class="info">
                <h2 class="flex-between">
                  <span>
                    {{ comment.user.nickname }}- <small> · 61月前</small></span
                  >
                  <div class="tool flex-row">
                    <i class="iconfont nicezan1 icon-zan"></i
                    ><span>({{ comment.likedCount }})</span
                    ><i class="iconfont nicevoice icon-comment"></i>
                  </div>
                </h2>
                <div class="content">
                  {{ comment.content }}
                </div>
              </div>
            </li>
          </ul>
          <p v-else>暂无评论</p>
        </div>
        <div class="page-wrap">
          <el-pagination
            background
            layout="prev,pager, next,total"
            hide-on-single-page
            :total="getMvCommentsCount"
            :page-size="limit"
            :current-page="currentPage"
            :page-count="pageCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="profile module shadow">
        <div class="card-header flex-row">
          <span>视频简介</span>
        </div>
        <div class="content">
          <p>{{ getMvDetail.desc }}</p>
        </div>
      </div>
      <div class="related module shadow">
        <div class="card-header flex-row">
          <span>相关推荐</span>
        </div>
        <ul>
          <li
            v-for="(SimiMv, index) of getSimiMvs"
            :key="index"
            @click="getDetail(SimiMv)"
          >
            <div class="avatar">
              <img
                :src="SimiMv.cover + '?param=320y180'"
                :alt="SimiMv.name"
                :title="SimiMv.name"
              />
              <div class="action">
                <button title="播放" class="play flex-center">
                  <i class="iconfont nicebofang1"></i>
                </button>
              </div>
            </div>
            <div class="info">
              <h2 class="flex-row ellipsis">
                <i class="iconfont nicemv24"></i>{{ SimiMv.name }}
              </h2>
              <div class="author">
                By.<span><small></small></span
                ><span
                  ><small> {{ SimiMv.artistName }}</small></span
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      loadingComment: false,
      limit: 20, //每页评论数
      currentPage: 1, //当前评论页码
      // tags: [], //MV标签
      rightID: this.$route.query.id, //右侧MV ID
    };
  },
  mounted() {
    // MV id
    let id = this.$route.query.id;
    // 查询对应ID的MV地址
    this.$store.dispatch("getMvUrl", id);
    // 查询对应MV热门评论
    this.$store.dispatch("getHotComments", {
      id: id,
      limit: this.limit,
      offset: this.offset,
    });
    // 查询对应MV全部评论
    this.$store.dispatch("getMvComments", {
      id: id,
      limit: this.limit,
      offset: this.offset,
    });
    // 获取相关mv
    this.$store.dispatch("getSimiMvs", id);

    //当前MV详情数据(不含真实地址)
    this.$store.dispatch("getMvDetail", id);

    //MV 点赞 转发等数据
    this.$store.dispatch("getMvSocial", id);
  },
  computed: {
    ...mapGetters([
      "getMvSrc",
      "getMvHotComments",
      "getMvComments",
      "getSimiMvs",
      "getMvCommentsCount",
      "getMvDetail",
      "getMvLikedCount",
      "getMvShareCount",
    ]),
    //总页码数 =  总歌单数/ 每页歌单数
    pageCount() {
      return Math.ceil(this.getMvCommentsCount / this.limit);
    },
    offset() {
      return (this.currentPage - 1) * this.limit;
    },
  },
  methods: {
    handleSizeChange(size) {
      console.log("第一次请求");
      this.limit = size;
      this.loadingComment = true;
      //获取当前页MV评论数据
      // getMvComments(this.$route.query.id, this.pageSize, this.offset).then(
      //   (res) => {
      //     if (res.comments != []) {
      //       this.allComments = res.comments;
      //       this.loadingComment = false;
      //     }
      //   }
      // );
      this.$store.dispatch("getMvComments", {
        id: this.$route.query.id,
        limit: this.limit,
        offset: this.offset,
      });
      this.loadingComment = false;
    },
    handleCurrentChange(currentPage) {
      console.log("第一次请求");
      this.currentPage = currentPage;
      this.loadingComment = true;
      //获取当前页歌单数据
      // getMvComments(this.$route.query.id, this.pageSize, this.offset).then(
      //   (res) => {
      //     if (res.comments != []) {
      //       this.allComments = res.comments;
      //       this.loadingComment = false;
      //     }
      //   }
      // );
      this.$store.dispatch("getMvComments", {
        id: this.$route.query.id,
        limit: this.limit,
        offset: this.offset,
      });
      this.loadingComment = false;
    },
    // showMvUrl(id) {
    //   getMvUrl(id).then((res) => {
    //     this.mvURL = res.data.url;
    //   });
    // },
    //全部评论
    // showMvComments(id, limit, offset) {
    //   getMvComments(id, limit, offset).then((res) => {
    //     this.allComments = res.comments;
    //     this.total = res.total;
    //   });
    // },
    //热门评论
    // showHotComments(id, limit, offset) {
    //   getMvComments(id, limit, offset).then((res) => {
    //     this.hotComments = res.hotComments;
    //   });
    //   if (this.hotComments.length == 0) {
    //     this.hasComment = false;
    //   }
    // },
    //获取相关mv
    // showSimiMvs(id) {
    //   getSimiMvs(id).then((res) => {
    //     this.SimiMvs = res.mvs;
    //   });
    // },
    // 当前MV详细数据
    // showMvDetail(id) {
    //   getMvDetail(id).then((res) => {
    //     this.currentMV = res.data;
    //     this.tags = res.data.videoGroup;
    //   });
    // },

    getDetail(mv) {
      // this.$router.push({ name: "mvDetail", query: { id: mv.id } });
      this.rightID = mv.id;
    },
  },

  watch: {
    rightID(newID) {
      //更新路由
      this.$router.push({ name: "mvDetail", query: { id: newID } });
      // 获取数据
      // 查询对应ID的MV地址
      // this.showMvUrl(newID);
      this.$store.dispatch("getMvUrl", newID);
      // 查询对应MV热门评论
      this.$store.dispatch("getHotComments", {
        id: newID,
        limit: this.limit,
        offset: this.offset,
      });
      // 查询对应MV全部评论
      this.$store.dispatch("getMvComments", {
        id: newID,
        limit: this.limit,
        offset: this.offset,
      });
      // 获取相关mv
      this.$store.dispatch("getSimiMvs", newID);

      //当前MV详情数据(不含真实地址)
      this.$store.dispatch("getMvDetail", newID);

      //MV 点赞 转发等数据
      this.$store.dispatch("getMvSocial", newID);
    },
  },
};
</script>
<style lang="stylus" scoped>
.mv-detail {
  display: flex;

  .left {
    flex: 1;
    width: 950px;
    padding: 15px;
    border-radius: 8px;
    margin-right: 20px;

    .title {
      margin-bottom: 10px;
      position: relative;

      i {
        font-size: 24px;
        margin-top: 1px;
        margin-left: -3px;
        color: $color-theme;
      }
    }

    .video-container {
      position: relative;
      padding-top: 56.25%;

      video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
      }
    }

    .video-foot {
      margin-top: 8px;

      .tag {
        margin-bottom: 8px;

        a {
          font-size: 12px;
          color: $color-theme;
          margin-right: 10px;
          cursor: pointer;
        }
      }

      p {
        span {
          margin-right: 30px;
          font-size: 12px;
          color: #999;
        }
      }

      .follow {
        display: flex;
        margin-top: 10px;

        .box {
          width: auto;
          border-radius: 15px;
          padding: 0px 15px;
          background: #f2f2f2;
          margin-right: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #161e27;
          cursor: pointer;

          i {
            font-size: 26px;
            color: #161e27;
          }

          &.active {
            color: #fff;
            background: $color-theme;

            .icon-like {
              color: #fff;
            }
          }
        }
      }
    }

    .comments {
      margin-top: 25px;

      .title {
        width: 100%;
        height: 50px;
        // background: #f8f8f8;
        border-radius: 3px;
        padding: 0 3px;
        border-bottom: 1px solid #f1f1f1;

        i {
          color: #666;
          font-size: 18px;
          margin-right: 10px;
        }

        span {
          margin-left: 5px;
        }
      }

      .comment-box {
        margin-top: 20px;

        p {
          i {
            margin-right: 10px;
          }

          span {
            flex: 1;
          }

          .cancel-comment {
            color: #d9dfff;
            font-size: 12px;
            background: none;
            padding: 6px 10px;
            border-radius: 2px;
            border: 1px solid #dee3ff;
            cursor: pointer;
          }
        }

        .comment-form {
          display: flex;
          margin-top: 1.5em;

          .avatar {
            width: 50px;
            height: 50px;
            border-radius: 3px;
            margin-right: 20px;
            position: relative;
            flex-shrink: 0;

            img {
              width: 100%;
              border-radius: 3px;
            }
          }

          .comarea {
            flex: 1;

            textarea {
              width: 100%;
              outline: none;
              background: #f8f9ff;
              resize: none;
              padding: 6px 12px;
              color: #666;
              border: 1px solid #eaebff;
              border-radius: 3px;
              font-size: 13px;
              height: 80px;
            }
          }
        }
      }

      .comment-foot {
        margin-top: 15px;

        .comment-btn {
          color: #fff;
          padding: 10px 30px;
          font-size: 0.75rem;
          border-radius: 3px;
          border: none;
          cursor: pointer;
          outline: none;
          background: #FF416C; /* fallback for old browsers */
          background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to right, #FF4B2B, #FF416C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
      }

      .page-wrap {
        margin-top: 20px;
      }
    }
  }

  .right {
    width: 350px;
    flex-shrink: 0;

    .module {
      padding: 15px;
      width: 100%;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .profile {
      .author {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        margin-top: 5px;

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin-right: 15px;

          img {
            width: 40px;
            height: 40px;
            border-radius: 20px;
          }
        }

        p {
          flex: 1;
        }

        .follow {
          padding: 3px 10px;
          font-size: 12px;
          background: $color-theme;
          color: #ffffff;
          border: 1px solid $color-theme;
          cursor: pointer;
          border-radius: 18px;

          &:hover {
            background: none;
            color: $color-theme;
          }
        }
      }
    }

    .related {
      padding-bottom: 5px;

      ul {
        li {
          display: flex;
          flex-direction: column;
          margin-bottom: 15px;

          .avatar {
            width: 100%;
            margin-right: 15px;
            flex-shrink: 0;
            position: relative;

            img {
              width: 100%;
            }

            .action {
              display: none;
              position: absolute;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);

              .play {
                width: 32px;
                height: 32px;
                padding: 0;
                border: none;
                border-radius: 50%;
                color: #fff;
                cursor: pointer;
                background-color: $color-theme;

                i {
                  font-size: 12px;
                }
              }
            }
          }

          .info {
            height: 50px;
            width: calc(100% - 50px);
            flex: 1;
            display: flex;
            justify-content: center;
            flex-direction: column;

            h2 {
              font-size: 14px;
              margin-bottom: 3px;
              margin-top: 5px;
              width: 100%;
              min-height: 20px;

              i {
                color: $color-theme;
                font-size: 24px;
                margin-right: 5px;
              }
            }

            .author {
              font-size: 12px;
              color: #a5a5c1;

              span {
                font-size: 12px;
                color: #a5a5c1;

                &::after {
                  content: '/';
                  margin-left: 5px;
                }

                &:last-child {
                  &::after {
                    content: '';
                  }
                }
              }
            }
          }

          &:hover {
            .action {
              display: flex;
            }
          }
        }
      }
    }

    .comment {
      ul {
        li {
          padding: 10px 0;
          width: 100%;
          display: flex;

          .avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin-right: 12px;
            flex-shrink: 0;

            img {
              width: 100%;
              border-radius: 50%;
            }
          }

          .info {
            flex: 1;

            h2 {
              font-size: 15px;
              margin-right: 5px;
              margin-bottom: 10px;

              small {
                font-size: 12px;
                color: #a5a5c1;
                font-weight: 200;
              }
            }

            p {
              width: 100%;
              font-size: 12px;
              color: #666666;
              line-height: 1.6;
              padding: 5px 10px;
              background: #f5f5f5;
              margin-top: 5px;
              border-radius: 3px;
            }
          }
        }
      }
    }

    .card-header {
      border-left: 3px solid $color-theme;
      height: 20px;
      padding-left: 1rem;
      margin-bottom: 15px;
      font-weight: bold;

      .icon-like {
        font-size: 20px;

        &.active {
          color: $color-theme;
        }
      }
    }
  }
}

.comment-list {
  margin-top: 20px;

  h3 {
    margin-bottom: 15px;
    font-size: 16px;
  }

  ul {
    li {
      padding: 10px 0;
      width: 100%;
      display: flex;

      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-right: 12px;
        flex-shrink: 0;

        img {
          width: 100%;
          border-radius: 50%;
        }
      }

      .info {
        flex: 1;

        h2 {
          font-size: 15px;
          margin-right: 5px;
          margin-bottom: 10px;

          small {
            font-size: 12px;
            color: #a5a5c1;
            font-weight: 200;
          }

          .tool {
            i {
              font-size: 24px;
              font-weight: 100;
              margin-left: 20px;
              cursor: pointer;
              transition: all 0.4s;

              &.icon-zan {
                &.active {
                  color: $color-theme;
                }
              }
            }

            span {
              font-size: 12px;
              margin-top: 2px;
              color: #666;
              font-weight: 200;
              position: relative;

              &::after {
                content: '';
                width: 1px;
                height: 13px;
                background: #4a4a4a;
                opacity: 0.7;
                position: absolute;
                top: 2px;
                right: -12px;
              }
            }
          }
        }

        .content {
          width: 100%;
          font-size: 12px;
          color: #4a4a4a;
          line-height: 1.6;
          padding: 8px 10px;
          background: #f5f5f5;
          margin-top: 5px;
          border-radius: 3px;

          .beReqlied {
            margin-top: 10px;
            background: #ffffff;
            padding: 8px 10px;
            border-radius: 3px;
            color: #666666;

            small {
              color: $color-theme;
            }
          }
        }
      }
    }
  }
}

.comment-box {
  margin-top: 20px;

  p {
    i {
      margin-right: 10px;
    }

    span {
      flex: 1;
    }

    .cancel-comment {
      color: #d9dfff;
      font-size: 12px;
      background: none;
      padding: 6px 10px;
      border-radius: 2px;
      border: 1px solid #dee3ff;
      cursor: pointer;
    }
  }

  .comment-form {
    display: flex;
    margin-top: 1.5em;

    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 3px;
      margin-right: 20px;
      position: relative;
      flex-shrink: 0;

      img {
        width: 100%;
        border-radius: 3px;
      }
    }

    .comarea {
      flex: 1;

      textarea {
        width: 100%;
        outline: none;
        background: #f8f9ff;
        resize: none;
        padding: 6px 12px;
        color: #666;
        border: 1px solid #eaebff;
        border-radius: 3px;
        font-size: 13px;
        height: 80px;
      }
    }
  }
}

.comment-foot {
  margin-top: 15px;

  .comment-btn {
    color: #fff;
    padding: 10px 30px;
    font-size: 0.75rem;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    outline: none;
    background: #FF416C; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FF4B2B, #FF416C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
}
</style>
